<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
      <!--
        1、列表
          在HTML文档中，列表结构主要有三种:
            无序列表(<ul><li>...</li></u1>)
            有序列表(<o1><li>...</li></o1>)
            定义列表(<d1><dt>...</dt><dd>...</dd></d1>)
        2、代码
            (1)使用<code></code>来显示单行内联代码
            (2)使用<pre></pre>来显示多行块代码
               样式: pre-scrollable (height,max-height高度固定,为348px,超过存在滚动条)
            (3)使用<kbd></kbd>来显示用户输入代码,如快捷键
      -->

<!--1、列表-->
      <!--无序列表-->
      <ul>
        <li>无序项目表一</li>
        <li>无序项目表二</li>
      </ul>
      <!--有序列表-->
      <ol>
        <li>无序项目列表一</li>
        <li>无序项目列表二</li>
      </ol>
      <!--定义列表-->
      <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表是一种样式表语言</dd>
      </dl>

      <hr>

      <!--去点列表-->
      <ul class="list-unstyled">
        <li>无序项目表一</li>
        <li>无序项目表二</li>
      </ul>
      <!--内联列表（变成水平方向，并且去点）-->
      <ul class="list-inline">
        <li>首页</li>
        <li>Java学院</li>
        <li>在线课堂</li>
      </ul>
      <!--自定义列表 内联列表-->
      <dl class="dl-horizontal">
        <dt>HTML 超文本标记语言</dt>
        <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
        <dt>测试标题不能超过160px的宽度，否则2个点</dt>
        <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
      </dl>

      <hr>
      <br>



<!--2、代码-->
      <!--使用<code></code>来显示单行内联代码-->
      this is a simple code<br />
      <code>this is a simple code</code><!--单行-->
      <code>
          this is a simple code
          只能显示单行
      </code>

      <!--快捷键-->
      <p>使用<kbd>CTRL</kbd> + <kbd>S</kbd> 保存内容</p>

      <!--多行代码-->
      <!--代码会保留原本的格式，包括空格和回车-->
      <pre>
          public static void main(String[] args){
                System.out.println("HelloWorld...");
          }
      </pre>
      <!--显示html代码需要使用字符实体-->
      <pre>
          &lt;h2&gt;你好&lt;/h2&gt;
      </pre>
      <!--当长度超过指定值，可以添加滚动条-->
      <pre class="pre-scrollable">
        <ol>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
        </ol>
      </pre>



<!--表格-->
<table class="table table-bordered table-striped table-hover table-condensed">
    <tr class="info">
        <th>JavaSE</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="success">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="warning">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
    <tr class="active">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
    <tr class="danger">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>
</body>
</html>